<template>
  <view class="content with-100">
    <view class="list">
      <!-- v-if="hasLogin" -->
      <template>
        <view class="li" v-for="(li, list_i) in severList" @tap="toPage2(li, list_i)" hover-class="hover" :key="li.name">
          <view class="text">{{ li.name }}</view>
          <text class="yzb yzb-next icon-next" v-if="li.right"></text>
        </view>
      </template>
    </view>
    <!-- <button class="btn" @click="loginOut" v-if="hasLogin">退出登录</button> -->
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
  },
  data() {
    return {
      severList: [
        { name: '关于我们', show: true, right: true, icon: 'addr.png', url: '/pages/user/setting/aboutUs' },
        { name: '意见反馈', show: true, right: true, icon: 'addr.png', url: '/pages/user/setting/feedBack' },
        { name: '客服中心', show: true, right: true, icon: 'addr.png', url: this.$mRoutesConfig.aboutUs },
        { name: '账户注销', show: true, right: true, icon: 'addr.png', url: this.$mRoutesConfig.aboutUs },
      ],
    }
  },
  onLoad() {},
  methods: {
    loginOut() {
      let that = this
      uni.showLoading({ mask: true })
      setTimeout(function () {
        uni.clearStorageSync()
        uni.hideLoading()
        that.$store.commit('SET_LOGOUT')
        if (that.goEasy.getConnectionStatus() === 'connected') {
          console.log('do  disconnect')
          //断开连接
          getApp().globalData.imService.disconnect()
        }
        uni.reLaunch({ url: '/pages/user/user' })
      }, 1500)
    },
    //用户点击列表项
    toPage2(list_i, li_i) {
      this.$mRouter.push({
        route: list_i.url,
        query: {
          id: 1,
        },
      })
    },
  },
}
</script>
<style>
page {
  background: #f5f5fc;
}
</style>
<style lang="scss">
.system {
  width: 94.5%;
  height: 100upx;
}
.btn {
  border-radius: 20rpx;
  margin-top: 50upx;
  font-size: 35rpx;
  width: 90%;
  background-color: $uni-color-error;
  color: #ffffff;
}
.list {
  width: 100%;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;
  .li {
    height: 100upx;
    padding: 0 2%;
    border-bottom: solid 1upx#F9F9F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    &:last-child {
      border-bottom: 0;
    }
    .icon {
      flex-shrink: 0;
      width: 50upx;
      height: 50upx;
      image {
        width: 50upx;
        height: 50upx;
      }
    }
    .to {
      flex-shrink: 0;
      width: 40upx;
      height: 40upx;
    }
    .icon-next {
      font-size: 40rpx;
      color: #333;
    }
  }
}
</style>
